<template>
  <div class="register-page">
    <!-- 顶部导航 -->
    <van-nav-bar title="用户注册" left-arrow @click-left="$router.go(-1)" />

    <!-- 注册表单 -->
    <van-form @submit="onSubmit" class="register-form">
      <!-- 邮箱输入 -->
      <van-field
        v-model="form.email"
        name="email"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]"
      />

      <!-- 用户名输入 -->
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }, { min: 4, message: '用户名长度不小于4位' }]"
      >
        <template #label>
          <span class="required-field">用户名</span>
        </template>
      </van-field>

      <!-- 密码输入 -->
      <van-field
        v-model="form.password"
        name="password"
        label="密码"
        type="password"
        placeholder="请输入密码"
        :show-password="true"
        :rules="[{ required: true, message: '请填写密码' }, { min: 6, message: '密码长度不小于6位' }]"
        @input="checkPasswordStrength"
      >
        <template #label>
          <span class="required-field">密码</span>
        </template>
        <template #extra>
          <div class="password-strength" v-if="form.password">
            <div class="strength-bar" :class="strengthClass"></div>
            <span class="strength-text">{{ strengthText }}</span>
          </div>
        </template>
      </van-field>

      <!-- 确认密码 -->
      <van-field
        v-model="form.confirmPassword"
        name="confirmPassword"
        label="确认密码"
        type="password"
        placeholder="请再次输入密码"
        :show-password="true"
        :rules="[
          { required: true, message: '请再次输入密码' },
          { validator: validatePassword, message: '两次密码不一致' }
        ]"
      >
        <template #label>
          <span class="required-field">确认密码</span>
        </template>
      </van-field>

      <!-- 协议勾选框 - 修复后的版本 -->
      <div class="agreement-container">
        <van-checkbox 
          v-model="agreed" 
          shape="square"
          icon-size="16"
          class="agreement-checkbox"
        >
          <span class="agreement-text">
            我已阅读并同意
            <a href="#" class="agreement-link">《用户协议》</a>
            和
            <a href="#" class="agreement-link">《隐私政策》</a>
          </span>
        </van-checkbox>
      </div>

      <!-- 注册按钮 -->
      <div class="submit-btn">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :disabled="!agreed"
          :loading="loading"
        >
          注册
        </van-button>
      </div>

      <!-- 登录链接 -->
      <div class="login-link">
        已有账号？<router-link to="/login">立即登录</router-link>
      </div>
    </van-form>
  </div>
</template>

<script setup name="register">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { registerid } from '../api/index'
import { showSuccessToast, showFailToast, showToast } from 'vant'
import { Checkbox } from 'vant'

const VanCheckbox = Checkbox
const router = useRouter()

const form = reactive({
  email: '',
  username: '',
  password: '',
  confirmPassword: ''
})

const loading = ref(false)
const agreed = ref(false)
const passwordStrength = ref(0) // 0: 弱, 1: 中, 2: 强

const checkPasswordStrength = () => {
  const password = form.password
  if (!password) {
    passwordStrength.value = 0
    return
  }

  let strength = 0

  // 长度评分
  if (password.length >= 6) strength++
  if (password.length >= 8) strength++
  if (password.length >= 12) strength++

  // 复杂度评分
  if (/[A-Z]/.test(password)) strength++ // 大写字母
  if (/[a-z]/.test(password)) strength++ // 小写字母
  if (/[0-9]/.test(password)) strength++ // 数字
  if (/[^A-Za-z0-9]/.test(password)) strength++ // 特殊字符

  // 确定强度等级
  if (strength <= 3) {
    passwordStrength.value = 0 // 弱
    showToast("请添加大小写字母或者添加字符来提高代码强度")
  } else if (strength <= 6) {
    passwordStrength.value = 1 // 中
  } else {
    passwordStrength.value = 2 // 强
  }
}

const strengthText = computed(() => {
  const texts = ['弱', '中', '强']
  return texts[passwordStrength.value]
})

const strengthClass = computed(() => {
  const classes = ['weak', 'medium', 'strong']
  return classes[passwordStrength.value]
})

const validatePassword = (val) => val === form.password

// 检查密码强度是否足够
const isPasswordStrongEnough = computed(() => {
  return passwordStrength.value >= 1 // 1:中, 2:强
})

const onSubmit = async () => {
  if (!agreed.value) {
    showFailToast('请先同意用户协议和隐私政策')
    return
  }

  // 检查密码强度
  if (!isPasswordStrongEnough.value) {
    showFailToast('密码强度不足，请使用更复杂的密码')
    return
  }

  try {
    loading.value = true
    await registerid(form)
    showSuccessToast('注册成功')
    setTimeout(() => router.push('/login'), 1500)
  } catch (error) {
    showFailToast(error.message || '注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="less" scoped>
.register-page {
  padding: 20px;
  min-height: 100vh;
  background-color: #f7f8fa;

  .register-form {
    margin-top: 30px;

    .required-field::before {
      content: '*';
      color: #ee0a24;
      margin-right: 4px;
    }

    .password-strength {
      display: flex;
      align-items: center;
      margin-top: 8px;

      .strength-bar {
        height: 6px;
        border-radius: 3px;
        margin-right: 8px;
        transition: all 0.3s;

        &.weak {
          width: 60px;
          background-color: #ff4d4f;
        }

        &.medium {
          width: 100px;
          background-color: #faad14;
        }

        &.strong {
          width: 140px;
          background-color: #52c41a;
        }
      }

      .strength-text {
        font-size: 12px;
        color: #666;
      }
    }

    // 协议勾选框样式
    .agreement-container {
      padding: 0 16px;
      margin: 20px 0;
      
      .agreement-checkbox {
        display: flex;
        align-items: center;
        width: 120%;
        
        // 修复复选框图标显示问题
        ::v-deep(.van-checkbox__icon) {
          margin-right: 8px;
          flex-shrink: 0; // 防止图标被压缩
        }
        
        // 修复复选框标签样式
        ::v-deep(.van-checkbox__label) {
          display: inline;
          color: #666;
          font-size: 14px;
          line-height: 1.5;
        }
      }
      
      .agreement-link {
        color: #1989fa;
        text-decoration: none;
      }
    }

    .submit-btn {
      margin: 30px 0 20px;
      padding: 0 16px;
    }

    .login-link {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-top: 15px;

      a {
        color: #1989fa;
        text-decoration: none;
      }
    }
  }
}
</style>
    